<template>
  <!--物料种类-->
  <div class="app-container">
    <el-form class="jc_search_wrap" v-model="searchList">
      <label>种类名称</label><el-input v-model="searchList.typeName"></el-input>
       <el-button @click="searchRows"><i class="el-icon-search"></i> 查询</el-button>
       <el-button @click="emptyInputs"><i class="el-icon-close"></i> 清空</el-button>
    </el-form>

    <el-button-group class="jc_btn_wrap jc_btn_left">
       <el-button @click="createRow"><i class="jc_icon el-icon-plus"></i> 新建</el-button>
       <el-button @click="editRow"><i class="el-icon-edit"></i> 编辑</el-button>
       <el-button @click="deleteRow"><i class="el-icon-delete"></i> 删除</el-button>
    </el-button-group>

    <el-table :height="tableHeight"  :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row class="jc_table_wrap"  @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="80px">
      </el-table-column>

      <el-table-column label='物料名称'>
        <template scope="scope">
          {{scope.row.typeName}}
        </template>
      </el-table-column>
      <el-table-column label='备注'>
        <template scope="scope">
          {{scope.row.remark}}
        </template>
      </el-table-column>
      <el-table-column label='创建人'>
        <template scope="scope">
          {{scope.row.userName}}
        </template>
      </el-table-column>

       <el-table-column label='创建时间'>
        <template scope="scope">
          {{scope.row.createTime}}
        </template>
      </el-table-column>
    </el-table>
    <!--<el-pagination layout="prev, pager, next" :total="total" @current-change="changePage" :page-size="10" :current-page="currentPage"/>-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="changePage"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!--新建-->
    <el-dialog title="新建物料种类信息" :visible.sync="create_visible" class="jc_dialog_wrap">
      <el-form :model="form_create" label-width="120px">
        <el-form-item label="种类名称">
          <el-input v-model="form_create.typeName"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form_create.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitCreateForm">确定</el-button>
        <el-button @click="create_visible=false">取消</el-button>
      </div>
    </el-dialog>
    <!--编辑-->
    <el-dialog title="编辑角色" :visible.sync="edit_visible" class="jc_dialog_wrap">
      <el-form :model="form_edit" label-width="120px">
        <el-form-item label="种类名称">
          <el-input v-model="form_edit.typeName"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form_edit.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitEditForm">确定</el-button>
        <el-button @click="edit_visible=false">取消</el-button>
      </div>
    </el-dialog>
    <!--详情-->
<!--     <el-dialog title="角色详情" :visible.sync="detail_visible" class="jc_dialog_wrap">
      <el-form :model="form_detail" label-width="120px">
        <el-form-item label="角色名">
          <el-input v-model="form_detail.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-input v-model="form_detail.createTime" disabled></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detail_visible=false">关闭</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
  import * as MaterialType from "../../api/process/materialTypes";

  export default {
    components: {

    },
    data() {
      return {
        searchList: {
          pageSize: '',
        },
        list: null,
        total: 0,
        currentPage: 1,
        create_visible: false,
        detail_visible: false,
        edit_visible: false,
        form_create: {},
        form_detail: {},
        form_edit: {},
        multipleSelection: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        menuData: [],
        editMenuTree: [],
        pageSize: 10,
        currentPage: 1,
      }

    },
    created() {
      this.fetchData();
      // this.getMenuTree();
    },
    methods: {
      fetchData(p) {
        this.listLoading = true;
        this.searchList.pageNum = this.currentPage = p;
        this.searchList.pageSize = this.pageSize;
        MaterialType.getList(this.searchList).then(data => {
          console.log(data)
          this.list = data.rows;
          this.total = parseInt(data.total);
          this.listLoading = false;
        })

      },
      searchRows() {
        this.fetchData()
      },
      emptyInputs() {
        this.searchList = {};
        this.fetchData()
      },
      createRow() {
        this.create_visible = true;
        this.form_create = {}

      },
      submitCreateForm() {
        MaterialType.createRow(this.form_create).then(data => {
          this.create_visible = false;
          this.fetchData();
        }).catch(() =>{
            this.$message.error('创建失败');
        })

      },
      editRow() {

        if(this.multipleSelection.length === 0) {
          this.$message({
            type:'warning',
            message:'请先勾选行'
          }) 
        }else if(this.multipleSelection.length >= 2) {
           this.$message({
            type:'warning',
            message:'每次最多勾选一行'
          }) 
        }else if(this.multipleSelection.length === 1) {
          MaterialType.getList({typeName:this.multipleSelection[0].typeName}).then(data => {
            this.edit_visible = true;
            this.form_edit.id = data.rows[0].id;
            this.form_edit.typeName = data.rows[0].typeName;
            this.form_edit.remark = data.rows[0].remark;
          })
        }
      },
      submitEditForm() {
        MaterialType.editRow(this.form_edit).then(data => {
          this.edit_visible = false;
          this.fetchData(this.currentPage);
        })
       


      },
      detailRow(row) {
      },
      deleteRow() {
        if(this.multipleSelection.length === 0) {
          this.$message({
            type:'warning',
            message:'请先勾选行'
          }) 
        }else if(this.multipleSelection.length >= 2) {
           this.$message({
            type:'warning',
            message:'每次最多勾选一行'
          }) 
        }else if(this.multipleSelection.length === 1){
          this.$confirm('是否删除该条数据?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            MaterialType.deleteRows(this.multipleSelection[0].id).then(data => {
              this.fetchData(this.currentPage);
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            })

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });

        }
      },
     
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      changePage(p) {
        this.fetchData(p)
      },
      handleSizeChange(val) {

        this.pageSize = val;
        this.currentPage = 1;
        this.fetchData(1);

      },
    },
    computed: {
      tableHeight() {
        const filterHeight = 28
        var tableHeight = this.getTableHeight(filterHeight)
        return tableHeight;
      },
      routes() {
        return this.$router.options.routes
      }
    }
  }
</script>